import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'

Vue.config.productionTip = false
Vue.use(ElementUI)

// 配置axios
axios.defaults.baseURL = '/api'

// Add request interceptor for debugging
axios.interceptors.request.use(config => {
  console.log('Request:', config.method.toUpperCase(), config.url, config.params || config.data);
  return config;
}, error => {
  console.error('Request Error:', error);
  return Promise.reject(error);
});

// Add response interceptor for debugging
axios.interceptors.response.use(response => {
  console.log('Response:', response.status, response.data);
  return response;
}, error => {
  console.error('Response Error:', error.response || error);
  // Show error message for the user
  if (error.response) {
    Vue.prototype.$message.error(`Error ${error.response.status}: ${error.response.data.msg || 'An error occurred'}`);
  } else {
    Vue.prototype.$message.error('Network error, please check your connection');
  }
  return Promise.reject(error);
});

Vue.prototype.$http = axios

// Add debugging utilities
window.debugApp = {
  // Test API calls directly
  async testApiCall(url, params = {}) {
    try {
      console.log('Testing API call to:', url, 'with params:', params);
      const response = await axios.get(url, { params });
      console.log('API response:', response);
      return response.data;
    } catch (error) {
      console.error('API error:', error);
      return error.response || error;
    }
  },
  
  // Check store state
  getStoreState() {
    return {
      user: store.state.userInfo,
      token: store.state.token,
      isAdmin: store.getters.isAdmin,
      localStorageItems: Object.keys(localStorage).reduce((acc, key) => {
        try {
          acc[key] = localStorage.getItem(key);
        } catch (e) {
          acc[key] = 'Error reading';
        }
        return acc;
      }, {})
    };
  },
  
  // Test user API
  async testUserApi() {
    return await this.testApiCall('/users/page', { page: 1, pageSize: 10 });
  }
};

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app') 